<template>
    <div class="tip">
        <div class="department">
            <div class="header">
                <div class="left">
                    <svg t="1732948964211" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6607" width="16" height="16">
                        <path
                            d="M400.696008 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C431.92936 143.078673 417.944857 129.093147 400.696008 129.093147z"
                            fill="#999999" p-id="6608"></path>
                        <path
                            d="M623.647823 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352l0-30.470989C654.881175 143.078673 640.896672 129.093147 623.647823 129.093147z"
                            fill="#999999" p-id="6609"></path>
                        <path
                            d="M425.695379 312.937269c11.209296 18.047028 41.974997 48.588625 86.152149 48.588625 43.958164 0 75.100442-30.308283 86.573751-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.539134-9.307993-33.851992-5.063319-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-19.993357 0-32.428573-18.107403-33.271778-19.373233-9.17087-14.417361-28.28009-18.799158-42.829458-9.760295C421.089477 279.028994 416.591023 298.28557 425.695379 312.937269z"
                            fill="#999999" p-id="6610"></path>
                        <path
                            d="M564.242851 625.945145l-20.278859 0L543.963992 462.486306c0-17.253966-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.979386-31.233352 31.233352l0 163.457816-20.283975 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L647.532813 709.234083C647.532813 663.309124 610.168834 625.945145 564.242851 625.945145zM585.066109 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L461.214337 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L440.392102 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L585.066109 812.258505z"
                            fill="#999999" p-id="6611"></path>
                        <path
                            d="M250.808256 625.945145l-17.482163 0 0-266.970354c0-35.483142 28.864398-64.35368 64.343447-64.35368 17.248849 0 31.233352-13.984503 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352c-69.924559 0-126.810151 56.890708-126.810151 126.820384l0 266.970354-23.079648 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L334.099241 709.234083C334.098217 663.309124 296.734238 625.945145 250.808256 625.945145zM271.630491 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L147.778718 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L126.956484 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L271.630491 812.258505z"
                            fill="#999999" p-id="6612"></path>
                        <path
                            d="M876.565113 625.945145l-21.961174 0 0-266.970354c0-69.929676-56.890708-126.820384-126.815267-126.820384-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.984503 31.233352 31.233352 31.233352c35.483142 0 64.348564 28.869514 64.348564 64.35368l0 266.970354-18.605753 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.034655 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L959.856098 709.234083C959.854051 663.309124 922.490072 625.945145 876.565113 625.945145zM897.387347 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L773.530458 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L752.708224 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.034655 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L897.387347 812.258505z"
                            fill="#999999" p-id="6613"></path>
                    </svg>
                    <span>常见科室</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1732949467622" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7971" width="16" height="16">
                        <path
                            d="M353.323071 246.407016L620.37222 510.637979l-265.320785 268.146133c-11.776208 11.775184-11.73425201 30.908964 0.091074 42.73429l0.001023 0c11.825326 11.82635 30.958082 11.867282 42.72815-2.930749L680.899758 535.559579c3.817955-4.273327 8.205892-9.321296 8.933463-12.045337 4.470825-11.112082 2.232854-24.76503301-6.710842-35.987632l-286.98213-286.98213c-11.875468-8.847505-31.096229-8.893554-42.922578 2.932796C341.393367 215.303624 341.439416 234.523361 353.323071 246.407016z"
                            p-id="7972"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>神经内科</li>
                    <li>消化内科</li>
                    <li>呼吸内科</li>
                    <li>内科</li>
                    <li>神经外科</li>
                    <li>妇科</li>
                    <li>产科</li>
                    <li>儿科</li>
                </ul>
            </div>
        </div>
        <div class="notice">
            <div class="header">
                <div class="left">
                    <svg t="1732949928772" class="icon" viewBox="0 0 1126 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9040" width="16" height="16">
                        <path
                            d="M384 399.36c-5.12 5.12-8.533333 8.533333-17.066667 8.533333h-78.506666c-13.653333 0-25.6 13.653333-25.6 25.6v160.426667c0 13.653333 13.653333 25.6 25.6 25.6h78.506666c5.12 0 13.653333 5.12 17.066667 8.533333l155.306667 160.426667c5.12 5.12 5.12 8.533333 8.533333 8.533333V232.106667l-8.533333 8.533333-155.306667 158.72z"
                            fill="#19ADF4" p-id="9041"></path>
                        <path
                            d="M742.4 0h-358.4C199.68 0 51.2 148.48 51.2 332.8v358.4C51.2 875.52 199.68 1024 384 1024h358.4C926.72 1024 1075.2 875.52 1075.2 691.2v-358.4C1075.2 148.48 926.72 0 742.4 0z m-143.36 805.546667c0 39.253333-22.186667 51.2-39.253333 51.2-17.066667 0-34.133333-8.533333-56.32-30.72l-145.066667-153.6h-64.853333c-42.666667 0-78.506667-39.253333-78.506667-81.92v-160.426667c0-47.786667 34.133333-81.92 78.506667-81.92H358.4l146.773333-150.186667c22.186667-22.186667 39.253333-30.72 56.32-30.72s39.253333 13.653333 39.253334 47.786667v590.506667z m121.173333-138.24l-8.533333 13.653333c-5.12 8.533333-13.653333 13.653333-22.186667 13.653333-5.12 0-8.533333 0-13.653333-5.12-8.533333-8.533333-13.653333-25.6-5.12-39.253333l8.533333-13.653333c25.6-34.133333 47.786667-68.266667 47.786667-124.586667s-22.186667-87.04-47.786667-121.173333c-5.12-5.12-8.533333-8.533333-13.653333-17.066667-8.533333-13.653333-8.533333-30.72 5.12-39.253333 8.533333-8.533333 25.6-8.533333 34.133333 5.12 5.12 5.12 8.533333 13.653333 13.653334 17.066666 30.72 39.253333 56.32 81.92 59.733333 150.186667 3.413333 73.386667-32.426667 121.173333-58.026667 160.426667z m78.506667 112.64c-5.12 5.12-8.533333 8.533333-17.066667 8.533333s-13.653333-5.12-17.066666-8.533333c-13.653333-13.653333-13.653333-25.6-5.12-39.253334 51.2-59.733333 98.986667-129.706667 98.986666-228.693333 0-95.573333-47.786667-168.96-98.986666-228.693333-8.533333-13.653333-5.12-30.72 5.12-39.253334 8.533333-8.533333 25.6-8.533333 34.133333 5.12 51.2 64.853333 107.52 146.773333 112.64 267.946667-1.706667 110.933333-56.32 197.973333-112.64 262.826667z"
                            fill="#19ADF4" p-id="9042"></path>
                    </svg>
                    <span>平台公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1732949467622" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7971" width="16" height="16">
                        <path
                            d="M353.323071 246.407016L620.37222 510.637979l-265.320785 268.146133c-11.776208 11.775184-11.73425201 30.908964 0.091074 42.73429l0.001023 0c11.825326 11.82635 30.958082 11.867282 42.72815-2.930749L680.899758 535.559579c3.817955-4.273327 8.205892-9.321296 8.933463-12.045337 4.470825-11.112082 2.232854-24.76503301-6.710842-35.987632l-286.98213-286.98213c-11.875468-8.847505-31.096229-8.893554-42.922578 2.932796C341.393367 215.303624 341.439416 234.523361 353.323071 246.407016z"
                            p-id="7972"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>关于延长北京大学国际医院放假的通知</li>
                    <li>北京中医药大学东方医院部分科室医生门诊医</li>
                    <li>武警总医院号源暂停更新通知</li>
                </ul>
            </div>
        </div>
        <!-- 停诊公告 -->
        <div class="notice">
            <div class="header">
                <div class="left">
                    <svg t="1685154393740" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6081" width="16" height="16">
                        <path
                            d="M736 768h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z m-44.8-415.552l-147.669333-147.669333a61.994667 61.994667 0 0 1-62.848 0l-147.669334 147.669333a32.554667 32.554667 0 0 1-46.037333-46.037333l161.578667-161.578667a63.68 63.68 0 0 1 127.104 0l161.578666 161.578667a32.554667 32.554667 0 0 1-46.037333 46.037333zM565.333333 512a32 32 0 0 1 0 64h-277.333333a32 32 0 0 1 0-64h277.333333z"
                            fill="#EB9E52" p-id="6082"></path>
                        <path
                            d="M853.333333 981.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333z m21.333334-576a42.666667 42.666667 0 0 0-42.666667-42.666666H192a42.666667 42.666667 0 0 0-42.666667 42.666666v469.333334a42.666667 42.666667 0 0 0 42.666667 42.666666h640a42.666667 42.666667 0 0 0 42.666667-42.666666V405.333333z"
                            fill="#5C8EF3" p-id="6083"></path>
                    </svg>
                    <span>停诊公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1685153789391" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4663" width="16" height="16">
                        <path
                            d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"
                            fill="#3D3D3D" p-id="4664"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告</li>
                    <li>首都医科大学附属北京潞河医院老年医学科门诊停诊公告</li>
                    <li>中日友好医院中西医结合心内科门诊停诊公告</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.tip {
    color: #7f7f7f;
    margin-top: 10px;
    font-size: 13px;
    position: sticky;
    top: 6em;

    .department {
        margin-bottom: 30px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left,
            .right {
                display: flex;
                align-items: center;

                span {
                    margin: 0 5px;
                }
            }
        }

        .content {
            margin-top: 15px;

            ul {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;

                li {
                    width: 48%;
                    margin: 7px 0;
                }
            }
        }
    }

    .notice {
        margin: 30px 0;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left,
            .right {
                display: flex;
                align-items: center;

                span {
                    margin: 0 5px;
                }
            }
        }

        .content {
            margin-top: 15px;

            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    margin: 7px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    &::before{
                        content: '•';
                        display: inline-block;
                        color: #8690d0;
                        margin-right: 5px;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}
</style>